<template>
  <div class="wp">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      style="margin: 0 auto;"
    >
      <el-form-item label="账号" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="记住我" prop="delivery">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  methods: {
    async submitForm() {
      console.log(this.form);
      this.$router.push("mine");
    }
  }
};
</script>

<style scoped>
body {
  margin: 0;
}

.wp {
  display: flex;
}

.nav-menu-bar {
  background-color: rgb(48, 64, 86);
  height: 100vh;
  width: 100%;
  transition: width 0.5s;
}

.el-menu {
  border: 0;
  width: 200px;
}

.logo {
  height: 64px;
  background-color: #2b2f3a;
  transition: width 0.5s;
  display: flex;
  align-items: center;
}

.logo img {
  height: 32px;
  width: 32px;
}

.left {
  flex: 1;
}

.header {
  background-color: rgb(48, 64, 86);
  height: 64px;
}

.xxp {
  display: flex;
  height: 64px;
  width: 64px;
  align-items: center;
  justify-content: center;
}

.header i {
  font-size: 30px;
}

.el-scrollbar {
  overflow: hidden;
  position: relative;
}

.yyp h1 {
  font-size: 12px;
  color: #fff;
}
</style>